<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>

    <style>
        html {
            font-family: sans-serif;
        }

        body {
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }

        .lastResult {
            color: white;
            padding: 3px;
        }
    </style>
</head>

<body>
    <h1>猜数字游戏</h1>

    <p>我刚才随机选定了一个100以内的自然数。
        看你能否在10次以内猜中它。
        每次我都会告诉你所猜的结果是高了还是低了。
    </p>
    
    <div class="form">
        <label for="guessField">请猜数：</label>
        <input type="text" id="guessField" class="guessField">
        <input type="submit" value="我猜" class="guessSubmit">
    </div>

    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
    </div>

    <script>
        // 开始编写 JavaScript 代码
        
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        const guesses = document.querySelector('.guesses');
        const lastResult = document.querySelector('.lastResult');
        const lowOrHi = document.querySelector('.lowOrHi');
        const guessSubmit = document.querySelector('.guessSubmit');
        const guessField = document.querySelector('.guessField');
        let guessCount = 1;
        let resetButton;

        function checkGuess() {
            let userGuess = Number(guessField.value);
            if (guessCount === 1) {
                guesses.textCoutent = '上次猜的数：';
            }

            guesses.textContent += userGuess + ' ';

            if (userGuess === randomNumber) {
                lastResult.textContent = '恭喜你！猜对了！';
                lastResult.style.backgroundColor = 'green';
                lowOrHi.textContent = '';
                setGameOver();
            } else if (guessCount === 10) {
                lastResult.textContent = '!!!游戏结束!!!';
                lowOrHi.textContent = '';
                setGameOver();
            } else {
                lastResult.textContent = '你猜错了！';
                lastResult.style.backgroundColor ='red';
                if (userGuess < randomNumber) {
                    lowOrHi.textContent = '你刚才猜低了！';
                } else if (userGuess > randomNumber) {
                    lowOrHi.textContent = '你刚才猜高了！';
                }
            }

            guessCount++;
            guessField.value = '';
            guessField.focus();
        }

        guessSubmit.addEventListener('click', checkGuess);

        function setGameOver() {
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement('button');
            resetButton.textContent = '开始新游戏';
            document.body.appendChild(resetButton);
            resetButton.addEventListener('click', resetGame);
        }

        function resetGame() {
            guessCount = 1;
            const resetParas = document.querySelectorAll('.resultParas p');
            for(let i = 0 ; i < resetParas.length ; i++) {
                resetParas[i].textContent = '';
            }

            resetButton.parenNode.removeChild(resetButton);
            guessField.disabled = false;
            guessSubmit.disabled = false;
            guessField.value = '';
            guessField.focus();
            lastResult.style.backgroundColor = 'white';
            randomNumber = Math.floor(Math.random() * 100) + 1;
        }
    </script>
</body>
</html>









